<script lang="ts" setup>
import to from 'await-to-js'
// import Detail from './detail.vue'
import OneTable from '@/component/public/table/oneTable.vue'
import type { UserInfo, HandleType } from './data'
import { getOperationList } from '@/utils/data'
// import Detail from '@admin/views/access/pill-mgt/detail.vue'

defineOptions({
  name: 'TableList'
})

const activeName = ref('1')
const defaultForm = () => {
  return {
    betestedStatus: activeName.value === '1' ? '已测试' : '待测试'
  }
}

const data = [
  {
    id: 6,
    orgName: '中国移动通信集团XX省有限公司',
    code: '100100006',
    time: '2020-09-01 13:44:21',
    applyUser: '叶静宜',
    status: 1,
    use: '能力使用'
  },
  {
    id: 1,
    orgName: '中国移动通信集团XX省有限公司',
    code: '100100001',
    time: '2020-09-01 13:44:21',
    applyUser: '叶静宜',
    status: 1,
    use: '能力使用'
  },
  {
    id: 2,
    orgName: '中国移动通信集团XX省有限公司',
    code: '100100002',
    time: '2020-05-06 13:46:21',
    applyUser: '叶静宜',
    status: 1,
    use: '能力使用'
  },
  {
    id: 3,
    orgName: '中国移动通信集团XX省有限公司',
    code: '100100003',
    time: '2020-09-01 13:44:21',
    applyUser: '叶静宜',
    status: 1,
    use: '能力使用'
  },
  {
    id: 4,
    orgName: '中国移动通信集团XX省有限公司',
    code: '100100004',
    time: '2020-09-01 13:44:21',
    applyUser: '叶静宜',
    status: 1,
    use: '能力使用'
  },
  {
    id: 5,
    orgName: '中国移动通信集团XX省有限公司',
    code: '100100005',
    time: '2020-09-01 13:44:21',
    applyUser: '叶静宜',
    status: 1,
    use: '能力使用'
  }
]
const tableData = ref<any[]>([])
const total = ref(0)
const tableRef = ref()
const loading = ref(true)
const searchForm = ref<any>(defaultForm())
const isDialog = ref(false)
const currentRow = ref<UserInfo>()
const type = ref<HandleType>('add')

watch(
  () => activeName.value,
  (val) => {
    searchForm.value.betestedStatus = val === '1' ? '已测试' : '待测试'
    searchTable()
  }
)

function searchTable() {
  tableRef.value?.resetPage()
}
function resetTable() {
  searchForm.value = defaultForm()
  searchTable()
}
const getList = async (val: UserInfo) => {
  let params = { ...val, ...searchForm.value }
  tableData.value = []
  loading.value = true
  const [err, res] = await to(getOperationList(params))
  loading.value = false
  if (err) return
  tableData.value = data
  // total.value = data.length
}

const showMessage = async (count: any, index?, row?) => {
  if (count == '1') {
    innerTableData.value[index].status = '已同步'
    console.log(row)
    if (row.method === '私有化部署') {
      const [confirm] = await to(
        ElMessageBox.confirm(`私有化部署能力已打通平台CI/CD系统，是否将能力自动部署到本平台?`, '系统提示', {
          type: 'warning',
          draggable: true
        })
      )
      if (confirm) return
      ElMessage.success(`同步${count}条数据成功，已启动能力自动部署流程！`)
    } else {
      ElMessage.success(`同步${count}条数据成功！`)
    }
  } else {
    innerTableData.value.forEach((item) => {
      item.status = '已同步'
    })
    ElMessage.success(`同步${count}条数据成功！`)
  }
}

const reload = () => {
  const data = JSON.parse(JSON.stringify(tableData.value[0]))
  data.code = Number(data.code) + 1
  data.id = data.id + 1
  tableData.value.splice(0, 0, data)
}

const innerTableData = ref([
  {
    Request_No: '100100007',
    code: 'A00100200001',
    abilityId: '39d0899ff09243e39b4f3f8ab4ba91f7',
    name: '数字孪生',
    tag: 'API_2.22_java',
    type: '行业能力',
    method: '私有化部署',
    onStatus: '待上架',
    Listed: '',
    Delisted: '',
    bereviewedStatus: '已评审',
    Reviewrejection: '',
    betestedStatus: '',
    Testpassed: '已测试',
    TestReject: '',
    describe: '提供PCC策略管理、机卡绑定和区域限制等能力',
    banner: '',
    belong: '重庆',
    provider: '中移物联网公司',
    contact: '义诚',
    contactPhone: '13715150077',
    mailbox: 'gaiyuhong@hdu.edu.cn',
    uploadUser: '重庆公司',
    uploadTime: '2024/1/9 21:10:10',
    pullCount: '1',
    status: '未同步'
  },
  {
    Request_No: '100100007',
    code: 'A00100200007',
    abilityId: '39d0899ff09243e39b4f3f8ab4ba91f7',
    name: 'PCC策略管理',
    tag: 'API_2.25_java',
    type: '行业能力',
    method: 'API',
    onStatus: '待上架',
    Listed: '',
    Delisted: '',
    bereviewedStatus: '已评审',
    Reviewrejection: '',
    betestedStatus: '',
    Testpassed: '已测试',
    TestReject: '',
    describe: '提供PCC策略管理、机卡绑定和区域限制等能力',
    banner: '',
    belong: '重庆',
    provider: '中移物联网公司',
    contact: '义诚',
    contactPhone: '13715150077',
    mailbox: 'gaiyuhong@hdu.edu.cn',
    uploadUser: '重庆公司',
    uploadTime: '2024/1/9 21:10:10',
    pullCount: '1',
    status: '未同步'
  },
  {
    Request_No: '100100008',
    code: 'A00100200008',
    abilityId: 'd9a326e47a86454f99a662e4b3b6cf18',
    name: '物联卡定位',
    tag: 'API_2.26_java',
    type: '行业能力',
    method: 'SDK',
    onStatus: '待上架',
    Listed: '',
    Delisted: '',
    bereviewedStatus: '已评审',
    Reviewrejection: '',
    betestedStatus: '待测试',
    Testpassed: '',
    TestReject: '',
    describe: '提供基站定位经纬度、区号定位区域编码等能力',
    banner: '',
    belong: '重庆',
    provider: '中移物联网公司',
    contact: '麟超',
    contactPhone: '18351078990',
    mailbox: '42830@hdu.edu.cn',
    uploadUser: '重庆公司',
    uploadTime: '2024/1/10 21:10:10',
    pullCount: '0',
    status: '未同步'
  },
  {
    Request_No: '100100009',
    code: 'A00100200009',
    abilityId: '934dbb1c56fe4e2a9e24a7c26e47dfb7',
    name: 'OneNET-Core',
    tag: 'API_2.27_java',
    type: '行业能力',
    method: '私有化部署',
    onStatus: '待上架',
    Listed: '',
    Delisted: '',
    bereviewedStatus: '已评审',
    Reviewrejection: '',
    betestedStatus: '',
    Testpassed: '已测试',
    TestReject: '',
    describe: '提供协议接入、设备安全、命令下发、物模型、系统存储等能力',
    banner: '',
    belong: '重庆',
    provider: '中移物联网公司',
    contact: '智志',
    contactPhone: '13467719111',
    mailbox: '42656@hdu.edu.cn',
    uploadUser: '重庆公司',
    uploadTime: '2024/1/11 21:10:10',
    pullCount: '0',
    status: '未同步'
  },
  {
    Request_No: '100100011',
    code: 'A00100200011',
    abilityId: 'b39a1266bf4e492ca7178e6bd997e2ab',
    name: '车辆通行能力',
    tag: 'API_2.29_java',
    type: '行业能力',
    method: 'H5',
    onStatus: '待上架',
    Listed: '',
    Delisted: '',
    bereviewedStatus: '已评审',
    Reviewrejection: '',
    betestedStatus: '',
    Testpassed: '已测试',
    TestReject: '',
    describe: '提供全链路的网络拓扑展示，网络拨测，异常结果告警等能力',
    banner: '',
    belong: '河北',
    provider: '中国移动通信集团河北有限公司',
    contact: '叶静宜',
    contactPhone: '13849038741',
    mailbox: '2908055220@qq.com',
    uploadUser: '河北公司',
    uploadTime: '2024/1/13 21:10:10',
    pullCount: '0',
    status: '未同步'
  },
  {
    Request_No: '100100018',
    code: 'A00100200018',
    abilityId: 'c498d317d0b147099e9cf0ec6539afdd',
    name: '视频监控能力',
    tag: 'API_2.36_java',
    type: '通用能力',
    method: 'API',
    onStatus: '已上架',
    Listed: '',
    Delisted: '',
    bereviewedStatus: '已评审',
    Reviewpassed: '',
    Reviewrejection: '',
    betestedStatus: '已测试',
    Testpassed: '',
    TestReject: '',
    describe: '提供大屏、手机端展示、AI分析等等能力',
    banner: '',
    belong: '河北',
    provider: '中国移动通信集团河北有限公司',
    contact: '张淑智',
    contactPhone: '18822488887',
    mailbox: '120197356@ qq.com',
    uploadUser: '河北公司',
    uploadTime: '2024/1/20 21:15:09',
    pullCount: '1',
    status: '未同步'
  }
])

const handle = (currentType: HandleType, row?: UserInfo) => {
  currentRow.value = row
  type.value = currentType
  isDialog.value = true
}

const handlleDelete = async (row: UserInfo) => {
  const [confirm] = await to(
    ElMessageBox.confirm(`是否删除该用户?`, '温馨提示', {
      type: 'warning',
      draggable: true
    })
  )
  if (confirm) return
  const [err] = await to(deleteUser(row.id))
  if (err) return
  ElMessage.success('删除成功')
  searchTable()
}

const closeDialog = (search: Boolean) => {
  isDialog.value = false
  search && searchTable()
}

const handleShow = (val) => {
  window.open(`/demo/ability/${val.abilityId}`)
}

const handleExport = () => {}
</script>

<template>
  <div class="w-full h-full app-container" style="padding: 20px">
    <div class="flex items-center justify-between pb-6 d-header">
      <div>
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
          <el-form-item label="能力名称:">
            <el-input v-model="searchForm.name" placeholder="能力名称" @change="searchTable()"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchTable()">查询</el-button>
            <el-button @click="reload" type="success">一键拉取</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="d-content">
      <one-table ref="tableRef" :data="tableData" :total="tableData.length" border :loading="loading" @update="getList" row-key="id">
        <!-- <el-table-column type="index" label="序号" align="center" width="60" />
        <el-table-column prop="name" label="能力拉取名称" align="center" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="belong" label="能力属地 " align="center" show-overflow-tooltip />
        <el-table-column prop="pushStatus" label="推送任务状态" align="center" show-overflow-tooltip />
        <el-table-column prop="reseon" label="原因" align="center" width="100" show-overflow-tooltip />
        <el-table-column prop="tag" label="能力版本号" align="center" width="100" show-overflow-tooltip />
        <el-table-column prop="pullTime" label="拉取时间" align="center" show-overflow-tooltip />
        <el-table-column prop="pullUser" label="拉取人员" align="center" width="100" show-overflow-tooltip />
        <el-table-column prop="remark" label="备注" align="center" show-overflow-tooltip />
        <el-table-column prop="operator" label="操作" width="160px" align="center" fixed="right">
          <template #default="{ row }">
            <el-button link @click="handleShow(row)" type="primary" icon="View" size="small">查看详情</el-button>
          </template>
        </el-table-column> -->
        <el-table-column type="expand">
          <template #default="props">
            <div class="child-table">
              <el-table :data="innerTableData" size="small">
                <el-table-column type="index" label="序号" align="center" width="80" />
                <el-table-column label="能力编码" align="center" prop="code" />
                <el-table-column label="能力名称" align="center" prop="name" />
                <el-table-column prop="method" label="交付方式" width="110" align="center" show-overflow-tooltip>
                  <template #default="{ row }">
                    <el-tag>{{ row.method }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column label="提供单位" align="center" prop="provider" />
                <el-table-column label="能力版本号" align="center" prop="tag" />
                <el-table-column label="同步状态" align="center" show-overflow-tooltip>
                  <template #default="{ row }">
                    <el-tag :type="row.status === '已同步' ? 'success' : 'info'">{{ row.status }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="185">
                  <template #default="scope">
                    <el-button link type="primary" size="small" @click="handleShow(scope.row)">详情</el-button>
                    <el-button link type="primary" size="small" @click="showMessage('1', scope.$index, scope.row)">本地同步</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </template>
        </el-table-column>
        <el-table-column type="index" label="序号" align="center" width="80" />
        <el-table-column prop="code" label="拉取单号" align="center" />
        <el-table-column prop="orgName" label="申请单位" align="center" />
        <el-table-column prop="use" label="申请用途" align="center" />
        <el-table-column prop="time" label="申请时间" align="center" width="200" />
        <el-table-column prop="applyUser" label="申请人" align="center" width="100" />
        <el-table-column prop="status" label="状态" align="center" width="80">
          <template #default="scope">
            <span>{{ scope.row.status ? '已审核' : '待审核' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="showMessage('5')" v-if="scope.row.status">本地同步订单</el-button>
          </template>
        </el-table-column>
      </one-table>
    </div>
  </div>
</template>

<style scoped lang="scss"></style>
./data
